import React from 'react'
import './App.css'
const App = () => {
  const name = 'zs'
  const age = 18
  const title = (
    <h1>
      姓名：{name}, 年龄：{age}
    </h1>
  )
  const car = {
    brand: '玛莎拉蒂',
  }
  const title2 = <h1>汽车：{car.brand}</h1>
  const friends = ['张三', '李四']
  const title3 = <h1>汽车：{friends[1]}</h1>

  const gender = 18
  const title4 = <h1>性别：{age >= gender ? '是' : '否'}</h1>

  function sayHi() {
    console.log(111)
    return '你好'
  }
  let green = 'green'
  const title5 = (
    <div>
      <button onClick={() => sayHi()}>按钮</button>
      <button onClick={sayHi}>按钮</button>
      <h1>姓名：{sayHi()}</h1>
    </div>
  )
  const isLodging = false
  const func = () => {
    // if (isLoding) {
    //   return <h1>加载中。。。</h1>
    // } else {
    //   return <h1>我是h1</h1>
    // }
    // return isLodging ? <h1>加载中。。。</h1> : <h1>我是h1</h1>
    isLodging && <h1>加载中。。。</h1>
    // if (isLodging) {
    //   return <h1>加载中。。。</h1>
    // }
  }
  const songs = ['温柔', '倔强', '私奔到月球']
  const func2 = () => {
    return songs.map((item, index) => <li key={index}>我是{item}</li>) //[<li>我是{item}</li>,<li>我是{item}</li>]
  }
  var obj = { id: 1, name: 'rose' }
  let red = 'green'
  const list = [
    { id: 1, name: '刘德华', content: '给我一杯忘情水' },
    { id: 2, name: '五月天', content: '不打扰，是我的温柔' },
    { id: 3, name: '毛不易', content: '像我这样优秀的人' },
  ]
  return (
    <div className="app">
      御剑乘风来,除魔天地间!==={title}=={title2}={title3}=={title4}=={title5}
      <h1>我是一个h1</h1>
      <button>loading。。。</button>
      ==={func()}
      <hr />
      {func2()}
      <hr />
      <ul>
        {songs.map((item, index) => (
          <li key={index}>我是{item}</li>
        ))}
      </ul>
      {/* ==={obj} */}
      <hr />
      <div style={{ color: red, background: 'yellow' }}>
        我是一个有颜色的盒子
      </div>
      <hr />
      <ul>
        {list.map((item) => {
          return <li key={item.id}>{item.name}</li>
        })}
        <h1 className="active" style={{ color: green }}>
          我是h1
        </h1>
      </ul>
    </div>
  )
}
export default App
